<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { onMounted } from 'vue';
import world from '../assets/world.json';

export default {
  setup() {
    // https://zh.wikipedia.org/wiki/%E5%86%AC%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A
    const placeData = [
      { name: "北京", value: [116.4, 40] },
      { name: "平昌", value: [128.4, 37.36] },
      { name: "索契", value: [40, 44] },
      { name: "温哥华", value: [-123, 50] },

      { name: "都灵", value: [7.7, 45.07] },
      { name: "盐湖城", value: [-112, 40.75] },
      { name: "长野", value: [138.19, 36.6] },
      { name: "利勒哈默尔", value: [10.467, 61.114] },
      { name: "阿尔贝维尔", value: [6.39, 45.676] },
      { name: "卡尔加里", value: [-114.05, 51.0333] },
      { name: "萨拉热窝", value: [18.413, 43.856] },
      { name: "普莱西德湖", value: [-73.985, 44.285] },
    ];

    const initTexture = () => {
      let canvas = document.createElement("canvas");
      let baseTexture = echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
      });
      echarts.registerMap('world', world);

      baseTexture.setOption({
        // 散点设置 https://echarts.apache.org/zh/option.html#series-scatter
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: [20, 20],
            itemStyle: {
              color: "red",
            },
            label: {
              show: true,
              color: "red",
              fontSize: 32,
              formatter: "{b}",
              position: "top",
            },

            data: placeData,
          },
        ],

        // 地图设置 https://echarts.apache.org/zh/option-gl.html#geo3D
        geo: {
          type: "map",
          map: "world",
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90],
          ],

          tooltip: {
            show: false,
          },

          itemStyle: {
            areaColor: "#419dfb",
            borderColor: "#564fc2",
            borderWidth: "1",
          },

          // 鼠标放到地球上的高亮显示
          emphasis: {
            itemStyle: {
              areaColor: "#4976fe",
            },
            label: {
              show: true,
              color: "black",
              fontSize: 28,
            },
          },
        },
      });

      return baseTexture;
    }

    const initEarth = () => {
      let baseTexture = initTexture();

      // 飞线设置 https://echarts.apache.org/zh/option-gl.html#series-lines3D
      let lines = [];
      for (let i = 0; i < placeData.length - 1; i++) {
        lines.push({
          type: "lines3D",
          coordinateSystem: "globe",
          data: [
            [placeData[i + 1].value, placeData[i].value],
          ],
          lineStyle: {
            color: 'rgb(50, 50, 150)',
            width: 5,
            opacity: 0.6,
          },
          effect: {
            show: true,
            period: 5,
            trailWidth: 5,
            trailLength: 0.3,
          },
        });
      }

      // 地球设置 https://echarts.apache.org/zh/option-gl.html#globe
      let option = {
        globe: {
          baseTexture: baseTexture,
          globeOuterRadius: 10,
          globeRadius: 90,
          displacementScale: 0.1,
          shading: "color",

          viewControl: {
            autoRotate: true,
            autoRotateAfterStill: 5,
            autoRotateSpeed: 5,
            // rotateSensitivity: [1, 0],
            zoomSensitivity: 0,
            beta: 200,
            alpha: 22,
            distance: 120,
          },
        },

        series: lines,
      };


      let myChart = echarts.init(document.getElementById('container'));
      myChart.clear();
      myChart.setOption(option, true);
    }


    onMounted(() => {
      initEarth()
    })
  }
};
</script>

<template>
  <div id="main">
    <div id="container"></div>

    <div id="card-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>中国-北京</span>
          </div>
        </template>
        <div
          class="text"
        >北京市，通称北京（汉语拼音：Běijīng；邮政式拼音：Peking），简称“京”，是中华人民共和国的首都及直辖市，中华人民共和国的政治、文化、科技和国际交往中心，全球城市，是世界人口第三多的城市和人口最多的首都，具有重要的国际影响力，同时也是2008夏季奥运会和2022冬季奥运会的举办地，唯一的双奥之城。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>韩国-平昌</span>
          </div>
        </template>
        <div class="text">平昌郡（朝鲜语：평창군／平昌郡）是大韩民国江原的郡，位于朝鲜半岛中东部的太白山区。平昌是韩国的滑雪胜地，也是2018年冬季奥林匹克运动会的主办地。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>俄罗斯-索契</span>
          </div>
        </template>
        <div
          class="text"
        >索契（俄语：Сочи，罗马化：Sochi；亚美尼亚语：Սոչի；格鲁吉亚语：სოჭი），另译素溪，是俄罗斯联邦克拉斯诺达尔边疆区辖下的城市。其位于黑海沿岸，并与阿布哈兹接界，是俄罗斯受欢迎的渡假胜地和疗养地，也是2014年冬季奥林匹克运动会的举办地。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>意大利-都灵</span>
          </div>
        </template>
        <div
          class="text"
        >都灵（意大利语：Torino [toˈriːno] ；皮埃蒙特语：Turin [tyˈɾiŋ]；拉丁语：Augusta Taurinorum），是位于意大利北部的重要工业城市，皮埃蒙特大区和都灵广域市的首府，意大利第三大城市，举办了2006年冬季奥林匹克运动会。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>美国-盐湖城</span>
          </div>
        </template>
        <div
          class="text"
        >盐湖城（英语：Salt Lake City、SLC、Salt Lake），是美国犹他州的首府和最大城市，以紧靠大盐湖而得名，名列美国西部内陆城市的第四位，举办了2002年冬季奥林匹克运动会。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>日本-长野</span>
          </div>
        </template>
        <div
          class="text"
        >长野市（日语：長野市／ながのし），是一个位在日本本州长野县北部的城市；该城市地处千曲川与犀川汇流处，为长野县县厅所在地，也是该县人口最多的市。1998年，当地举办1998年度冬奥会与1998年残疾人冬奥会。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>挪威-利勒哈默尔</span>
          </div>
        </template>
        <div
          class="text"
        >利勒哈默尔（挪威语：Lillehammer，挪威语发音：[ˈlɪ̂lːəˌhɑmːər] ），挪威内陆郡一城市，曾举办1994年冬季奥林匹克运动会及2016年冬季青年奥林匹克运动会。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>法国-阿尔贝维尔</span>
          </div>
        </template>
        <div
          class="text"
        >阿尔贝维尔（法语：Albertville，法语发音：[albɛʁvil] ），法国东部城市，是1992年冬季奥林匹克运动会的主办城市，是法国重要的冬季旅游目的地，同时也是前往阿尔卑斯山多个滑雪场的必经之路。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>加拿大-卡尔加里</span>
          </div>
        </template>
        <div
          class="text"
        >卡尔加里（英语：Calgary，发音： /ˈkælɡəri/），当地华人及港澳台均译为卡加利，又译卡加立、卡技利，简称卡城，是位于加拿大阿尔伯塔省南部洛矶山脉山麓的城市，亦是该省最大城市。该市面积789.9平方公里，海拔约1048米。1988年该市举办过第十五届冬季奥林匹克运动会，当时作为赛场的室内滑冰场位于知名学府卡尔加里大学的校区内。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>波斯尼亚-萨拉热窝</span>
          </div>
        </template>
        <div
          class="text"
        >萨拉热窝（波斯尼亚语：Sarajevo；克罗地亚语：Sarajevo；塞尔维亚语：Сарајево/Sarajevo，IPA：[sǎrajeʋo] ）是波斯尼亚和黑塞哥维纳的首都，也是波黑人口最多的城市，是1984年冬季奥林匹克运动会的会场。</div>
      </el-card>

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>美国-普莱西德湖</span>
          </div>
        </template>
        <div
          class="text"
        >普莱西德湖（英语：Lake Placid），又译宁静湖、静湖，是美国纽约州艾塞克斯县的阿第伦达克山脉中一个村庄。根据2000年人口普查，普莱西德湖村有2,638人。村庄因附近的普莱西德湖而得名，以举办1932年冬季奥林匹克运动会、1980年冬季奥林匹克运动会而闻名。</div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
#main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 70vh;
}

#container {
  width: 600px;
  height: 600px;
}

#card-container {
  height: 600px;
  overflow-x: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.box-card {
  width: 480px;
}
</style>

